<template>
  <div>
<!--    <h1> 这波展示一下 单tag</h1>-->

<!--    <HelloWorld msg="Welcome to Your Vue.js App" id="helloworld"/>-->
    <MyHeader> </MyHeader>
<!--    <input v-model="page">-->
<!--    <button @click=movePage()>go</button> ||-->
<!--    <button @click=nextPage()>next</button>-->

    <div id="carder">
          <el-row style="margin: 20px">
              <el-button @click=teenMode()>青少年模式</el-button>
              <el-button @click=re18Mode()> R18+模式 </el-button>
          </el-row>
          <el-row :gutter="20">
              <el-col :lg="{ span:6 }" v-for="img in imgIds_data" :key="img.id" :offset="0" >
                  <div class="grid-content ep-bg-purple common-layout">
                      <el-card class="box-card">
                          <template #header>
                              <div class="card-header">
                                  <el-row :gutter="20">
                                      <el-col :span="12" class="img_id_txt">
                                          <span>{{ img }}</span>
                                      </el-col>
                                      <el-col :span="12">
                                          <el-button class="primary" @click=toBigImgPage(img) >
                                              查看详情
                                          </el-button>
                                      </el-col>
                                  </el-row>
                              </div>
                          </template>
                          <div>
                              <a :href=getDetailUrl(img) >
                                  <el-image class="small_img" :src=getImgData(img) fit="fill" loading="lazy" align="center" />
                              </a>
                          </div>
                      </el-card>
                  </div>
              </el-col>
          </el-row>
          <el-row>
          </el-row>
      </div>


    <input v-model="page">
    <button @click=movePage()>go</button> ||
    <button @click=prevPage()>prev</button> ||
    <button @click=nextPage()>next</button>
  </div>
</template>
<script>
import {inject} from 'vue'
//import HelloWorld from "@/components/HelloWorld";
//import RightImgCarder from "@/components/RightImgCarder"
import MyHeader from "@/components/MyHeader"
import {useRoute} from "vue-router";
import axios from "axios";

export default {
  data() {
    return {
      myBaseURL: inject('$baseURL'),
      page:1,
      sept:32,
      tags: [],
      refresh: 1,
      imgIds_data: [],
      imgs_blob_data: {
      },
      myVueURL: inject('$vueURL'),
        teenM: false,
    }
  },
  created(){
      console.log("执行Create")
      if(isNaN(this.query.page))
          this.page = 1
      else
          this.page =  this.query.page
      console.log(this.tags)
      this.refresh++;
  },
  name: 'MyHome',
  components: {
    //HelloWorld,
    //RightImgCarder,
    MyHeader
  },
  methods: {
    teenMode: function (){
        this.teenM = true
        this.imgs_blob_data = new Map()
        let t_page = this.page;
        let t_sept = this.sept;
        if(isNaN(t_page)) {
            t_page = 1
        }
        if(isNaN(t_sept)) {
            t_sept = 32
        }
        this.getPageImgInfo(t_page,t_sept).then(res=>{
            let img_data = res
            this.imgIds_data = img_data;
            img_data.forEach((is_imgid)=>{
                this.getSmallImgBlob(is_imgid).then(res=>{
                    this.imgs_blob_data.set(is_imgid,res)
                })
            })
        })
    },
    re18Mode: function (){
          this.teenM = false
          this.imgs_blob_data = new Map()
          let t_page = this.page;
          let t_sept = this.sept;
          if(isNaN(t_page)) {
              t_page = 1
          }
          if(isNaN(t_sept)) {
              t_sept = 32
          }
          this.getPageImgInfo(t_page,t_sept).then(res=>{
              let img_data = res
              this.imgIds_data = img_data;
              img_data.forEach((is_imgid)=>{
                  this.getSmallImgBlob(is_imgid).then(res=>{
                      this.imgs_blob_data.set(is_imgid,res)
                  })
              })
          })
      },
    movePage: function (){
      this.$router.push({path: '/',query:{ page: this.page}} )
      if(this.page <= 0){
          this.$message.error('页码不能小于0！');//alert("页码不能小于0！")
          return
      }else {
          this.imgs_blob_data = new Map()
          let t_page = this.page;
          let t_sept = this.sept;
          if(isNaN(t_page)) {
              t_page = 1
          }
          if(isNaN(t_sept)) {
              t_sept = 32
          }
          this.getPageImgInfo(t_page,t_sept).then(res=>{
              let img_data = res
              this.imgIds_data = img_data;
              img_data.forEach((is_imgid)=>{
                  this.getSmallImgBlob(is_imgid).then(res=>{
                      this.imgs_blob_data.set(is_imgid,res)
                  })
              })
          })
          this.goBack();
      }
    },
    nextPage: function (){
      this.page =  parseInt(1) + parseInt(this.page)
      this.$router.push({path: '/',query:{ page: this.page}} )  // "/TagImgs/"+"?tag"+this.tag+"&page"+this.page
      //this.refresh++;
      this.goBack();
    },
    prevPage: function (){
      this.page =  parseInt(-1) + parseInt(this.page)
      this.$router.push({path: '/',query:{ page: this.page}} )  // "/TagImgs/"+"?tag"+this.tag+"&page"+this.page
      //this.refresh++;
      this.goBack();
    },
    goBack: function() {
      document.documentElement.scrollTop = 0;
    },
    getPageImgInfo: async function(page,sept){
        let re_data;
        console.log("开始获取数据")
        let url;
        if(this.teenM === false){
            url = '/search/img'
        }else {
            url = '/search/img/teen'
        }
        // await 声明等待异步操作执行完毕
        await axios({
            method:'post',
            url:url,
            baseURL:this.myBaseURL,
            params:{
                page: page,
                sept: sept,
            }
        }).then(function(response) {
            let res = response.data
            //res = JSON.stringify(response)
            //console.log(res)
            re_data = res
        });
        return re_data
    },
    toBigImgPage: function (img_id){
        this.$router.push({path: '/imgDetail/'+img_id} )
    },
    getDetailUrl:function (img_id){
        return '/imgDetail/'+img_id;  //this.myBaseURL+
    },
    getSmallImgBlob: async function (img_id) {
        let blob_url = "";
        await axios({
            //http://localhost:8090/img/getSmallImg?id=201035324
            method: 'get',
            url: '/source/getSmallImg',  //getBlobFromId   getSmallImg
            baseURL: this.myBaseURL,
            responseType: 'blob',
            params: {
                id: img_id,
            }
        }).then(function (response) {
            // blob方法需要先将 图片字符串转换成 blob（数组） 比较麻烦
            //const src = "data:image/jpg;base64," + response

            const blob = new Blob([response.data], {type: 'img/jpg'})
            blob_url = window.URL.createObjectURL(blob)
            // let imgdao = document.getElementById(img_id)  //img_id
            // imgdao.setAttribute("src",blob_url)

        });
        return blob_url
    },
    getImgData: function (img_id){
        let img_bolb = this.imgs_blob_data.get(img_id)
        return img_bolb
    },
  },
  mounted: function () {   /* mounted 是在加载页面的同时加载的函数 */
      this.imgs_blob_data = new Map()
      let t_page = this.page;
      let t_sept = this.sept;
      if(isNaN(t_page)) {
          t_page = 1
      }
      if(isNaN(t_sept)) {
          t_sept = 32
      }
      this.getPageImgInfo(t_page,t_sept).then(res=>{
          let img_data = res
          this.imgIds_data = img_data;
          img_data.forEach((is_imgid)=>{
              this.getSmallImgBlob(is_imgid).then(res=>{
                  this.imgs_blob_data.set(is_imgid,res)
              })
          })
      })
  },

  watch:{
      '$route' () {
          console.log("执行了watch '$route'监听函数 tags:" + this.tags)
          console.log("page:"+this.page)
      },
      page(){
          if(this.page <= 0){
              this.$message.error('页码不能小于0！');//alert("页码不能小于0！")
          }else {
              console.log(this.page)
              this.imgs_blob_data = new Map()
              let t_page = this.page;
              let t_sept = this.sept;
              if(isNaN(t_page)) {
                  t_page = 1
              }
              if(isNaN(t_sept)) {
                  t_sept = 32
              }
              this.getPageImgInfo(t_page,t_sept).then(res=>{
                  let img_data = res
                  this.imgIds_data = img_data;
                  img_data.forEach((is_imgid)=>{
                      this.getSmallImgBlob(is_imgid).then(res=>{
                          this.imgs_blob_data.set(is_imgid,res)
                      })
                  })
              })
          }
      }
  },
  setup(){
      const route = useRoute() //获取到值
      console.log("执行了setup函数")
      let query = route.query;
      return {
          query,
      }
  }
}

</script>

<style scoped>
.el-header{
  height: 20px;
  /*background-color: aquamarine;*/
}
/*.el-main{*/
/*  background-color: lightpink;*/
/*}*/
.img_con_head{
  vertical-align:bottom;
}
.img_head_txt{
  vertical-align:bottom;
  font-size: 24px;
}
.img_id_txt{
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-header{
  height: 20%;
}
.box-card{
  height: 400px;
}
</style>
